<template>
  <div class="main-layout">
    <!-- 左侧导航栏 -->
    <div class="sidebar">
      <div class="logo-container">
        <h1>图像管理系统</h1>
      </div>
      <nav class="nav-menu">
        <div class="nav-item" 
             v-for="item in menuItems" 
             :key="item.key"
             :class="{ active: currentMenu === item.key }"
             @click="handleMenuClick(item)">
          <i class="nav-icon">{{ item.icon }}</i>
          <span>{{ item.label }}</span>
        </div>
      </nav>
      <div class="user-info">
        <span>{{ username }}</span>
        <button class="logout-btn" @click="handleLogout">退出登录</button>
      </div>
    </div>

    <!-- 右侧内容区 -->
    <div class="content">
      <div class="content-header">
        <h2>{{ currentMenuLabel }}</h2>
      </div>
      <div class="content-body">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const menuItems = [
  { key: 'categories', label: '图片分类', icon: '📁' },
  { key: 'face', label: '人脸识别', icon: '👤' },
  { key: 'person', label: '行人识别', icon: '🚶' },
  { key: 'object', label: '物体识别', icon: '🎯' },
  { key: 'settings', label: '系统设置', icon: '⚙️' }
]

const currentMenu = ref('categories')
const username = ref(localStorage.getItem('username') || 'Admin')

const currentMenuLabel = computed(() => {
  return menuItems.find(item => item.key === currentMenu.value)?.label
})

const emit = defineEmits(['menu-change', 'logout'])

const handleMenuClick = (item) => {
  currentMenu.value = item.key
  emit('menu-change', item.key)
}

const handleLogout = () => {
  emit('logout')
}
</script>

<style scoped>
.main-layout {
  display: flex;
  height: 100vh;
  background-color: #f0f2f5;
}

.sidebar {
  width: 240px;
  background-color: #001529;
  color: white;
  display: flex;
  flex-direction: column;
}

.logo-container {
  height: 64px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-container h1 {
  font-size: 18px;
  margin: 0;
  color: white;
}

.nav-menu {
  flex: 1;
  padding: 16px 0;
}

.nav-item {
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.3s;
}

.nav-item:hover {
  background-color: #1890ff;
}

.nav-item.active {
  background-color: #1890ff;
}

.nav-icon {
  font-size: 20px;
}

.user-info {
  padding: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.logout-btn {
  padding: 8px;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.logout-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.content-header {
  height: 64px;
  background-color: white;
  padding: 0 24px;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.content-header h2 {
  margin: 0;
  font-size: 20px;
  color: #333;
}

.content-body {
  flex: 1;
  padding: 24px;
  overflow: auto;
}
</style> 